<template>
	<view class="container">
		<view class="headerNav">
			<u-navbar title="我的收藏"></u-navbar>

		</view>
		<view v-if="data.utype == 1">
			<z-paging :fixed="false" :height="data.height" ref="paging" v-model="dataList" @query="getSystemInfoSync"
				created-reload>
				<view class="container_ls" v-for="item in dataList" :key="item.id" @click="handleToReusme(item)">
					<view class="u-flex u-row-between">
						<view class="u-flex">
							<u-avatar :src="item.photo_img_src"></u-avatar>
							<view class="u-m-l-28">
								<view class="u-font-32 u-font-weight">{{item.fullname}}</view>
								<view class="u-m-t-16" style="color: #867F7F ;">
									{{`${item.experience_text} | ${item.education_text} | ${item.intention_wage}`}}
								</view>
							</view>
						</view>
						<view class="u-m-b-10 u-font-12" style="color: #867F7F ;">
							{{$u.timeFormat(item.addtime)}}
						</view>
					</view>
					<view class="u-p-l-30 u-p-r-30">
						<!-- 工作履历 -->
						<view class="u-flex u-m-t-32">
							<u-image src="/pages/pagesPersonal/static/experience.png" :width="40" :height="40"
								mode="widthFix"></u-image>
							<view class="u-m-l-16 u-white-80">
								{{`${item.companyname} · ${item.recent_work}`}}
							</view>
						</view>
						<!-- 求职意向职位 -->
						<view class="u-m-t-32 u-flex u-flex-wrap">
							<u-tag class="u-m-r-20 u-m-b-20" v-for="(tag,index) in item.intention_jobs.split(',')"
								:key="index" :text="tag" mode="dark" type="info" bg-color="#F2F2F2"
								color="#867F7F"></u-tag>
						</view>
						<!-- 备注 -->
						<view v-if="item.specialty" class="u-m-t-24" style="color:#867F7F">
							{{item.specialty}}
						</view>

						<view class="u-flex u-row-right u-m-t-28">
							<view class="container_ls_tag" @click.stop="deletejob(item.id)">
								取消收藏
							</view>
						</view>
					</view>

				</view>
			</z-paging>
		</view>
		<view class="bigNav" v-if="data.utype == 2">
			<z-tabs ref="tabs1" active-color="#00D075" :list="data.list" :current="data.current" @change="tabsChange" />
			<swiper :style="'height:'+ data.height+';padding:30rpx;'" :current="data.swiperCurrent"
				@transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging" v-model="dataList" @query="getSystemInfoSync" created-reload>
						<view class="one">
							<view class="newsList" v-for="(item, index) in dataList" :key="index"
								@tap="toDeill(item.jobid,1)">
								<view class="newsTop">
									<text>{{item.jobname}}</text>
									<text>{{item.wage_text}}</text>
								</view>
								<view class="brief">
									<view class="briefTop">
										<text>{{item.education_text}}</text>
										<text>{{item.experience_text}}</text>
										<text>{{item.district_text}}</text>
									</view>

									<view class="briefright">
										<text style=" color:#000;font-size: 28rpx;">{{item.companyname}}</text>
										<image src="/pages/pagesPersonal/static/personal/authentication.png">
										</image>
									</view>
								</view>
								<view class="more">
									<view class="moreleft">
										<image src="/pages/pagesPersonal/static/personal/footprint.png" mode=""></image>
										<text>{{item.click}}热度</text>
									</view>
									<button @tap.stop="deletejob(item.id)">取消收藏</button>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging2" v-model="dataList2" @query="getSystemInfoSync2"
						created-reload>
						<view class="two">
							<view class="newsList" v-for="item in dataList2" :key="item.id"
								@tap="toDeill(item.company_id,2)">
								<view class="newsTop">
									<view class="comname">
										<text>{{item.companyname}}</text>
										<image src="/pages/pagesPersonal/static/personal/authentication.png" mode="">
										</image>
									</view>
									<text>{{getMyDate(item.addtime*1000)}}</text>
								</view>
								<view class="brief">
									<text>{{item.district_text}}</text>
									<text>{{item.scale_text}}</text>
									<text>{{item.nature_text}}</text>
								</view>
								<view class="more">
									<view class="moreleft">
										<text>热招:</text>
										<text style="color: #00D075;margin-right: 5rpx;">{{item.first_jobname}}</text>
										<text>等{{item.jobnum}}个岗位</text>
									</view>
									<button @tap.stop="deletejob(item.id)">取消收藏</button>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>
		</view>
		<u-modal @confirm="cancelBatch" title="系统提示" content="确定要取消收藏吗?" :mask-close-able="true"
			:title-style="data.titleStyle" :show-cancel-button="true" v-model="data.dele">
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const tabs1 = ref();
	let dataList = ref([])
	let dataList2 = ref([])
	const paging = ref(null)
	const paging2 = ref(null)
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		height: "",
		list: [{
			name: '职位收藏'

		}, {
			name: '企业收藏'
		}],
		// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
		current: 0, // tabs组件的current值，表示当前活动的tab选项
		swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		dele: false,
		id: null
	})
	// 去简历详情页
	const handleToReusme = async (item) => {
		uni.$u.route('/pages/pagesHome/detailPages/resume', {
			id: item.resume_id,
			jobid: item.jobid,
			jobname: item.jobname
		})
	}

	const getSystemInfoSync = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize
		}
		let res
		if (data.utype == 1) {
			res = await uni.$u.api.company_fav_list({
				params
			})
		} else {
			res = await uni.$u.api.fav_job({
				params
			})
		}
		paging.value.complete(res.items)
	}
	const getSystemInfoSync2 = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize
		}
		let res = await uni.$u.api.attention_company({
			params
		})
		paging2.value.complete(res.items)
	}

	const deletejob = (id) => {
		data.dele = true
		data.id = id
	}

	const cancelBatch = async () => {
		let params = {
			id: data.id
		}
		if (data.utype == 1) {
			let res = await uni.$u.api.company_fav_cancel(params)
			paging.value.reload()
		} else {
			if (data.swiperCurrent == 0) {
				let res = await uni.$u.api.cancelBatch(params)
				paging.value.reload()
			} else {
				let res = await uni.$u.api.companycancelBatch(params)
				paging2.value.reload()
			}
		}
		uni.$u.toast('取消收藏成功')
	}
	// tabs通知swiper切换
	const tabsChange = (index) => {
		data.swiperCurrent = index;
	}

	const animationfinish = (e) => {
		let current = e.detail.current;
		tabs1.value.unlockDx(current);
		data.swiperCurrent = current;
		data.current = current;
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		if (data.utype == 1) {
			data.height = (uni.$u.sys().windowHeight - res.height) + 'px';
		} else {
			data.height = (uni.$u.sys().windowHeight - res.height - 75) + 'px';
		}
	}

	function getMyDate(str) {
		var oDate = new Date(str),
			oYear = oDate.getFullYear(),
			oMonth = oDate.getMonth() + 1,
			oDay = oDate.getDate(),
			oHour = oDate.getHours(),
			oMin = oDate.getMinutes(),
			oSen = oDate.getSeconds(),
			oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
			addZero(oMin) + ':' + addZero(oSen);
		return oTime;
	}
	//补零操作
	function addZero(num) {
		if (parseInt(num) < 10) {
			num = '0' + num;
		}
		return num;
	}
	const toDeill = (id, index) => {

		switch (index) {
			case 1:
				uni.$u.route("pages/pagesHome/detailPages/job", {
					id: id
				})
				break;
			case 2:
				uni.$u.route("pages/pagesHome/detailPages/company", {
					show: false,
					id: id

				})
				break;
		}
	}
	onReady(() => {
		getListHeight()
	})
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;

		&_ls {
			background-color: #fff;
			margin-bottom: 10rpx;
			padding: 32rpx;
			font-size: 26rpx;
			color: #101010;

			&_tag {
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				border: 2rpx solid rgba(187, 187, 187, 1);
				margin-left: 18rpx;
				padding: 12rpx 26rpx;
			}
		}

		.bigNav {
			.one {
				.newsList {
					padding: 30rpx;
					width: 100%;
					background-color: #fff;
					border-radius: 6rpx;
					margin-bottom: 20rpx;

					.newsTop {
						font-weight: bold;
						font-size: 32rpx;
						font-family: Arial;
						display: flex;
						justify-content: space-between;
						align-items: center;

						text:nth-child(2) {
							font-size: 24rpx;
							color: #00D075;
							font-weight: normal;
						}

						text:nth-child(1) {
							width: 50%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.brief {
						font-size: 26rpx;
						font-family: Arial;
						color: #867F7F;
						margin: 20rpx 0;
						display: flex;
						flex-direction: column;

						.briefTop {
							height: 60rpx;
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							text {
								background-color: #f1f1f1;
								border-radius: 6rpx;
								padding: 15rpx;
							}

							text:nth-child(2) {
								margin: 0 20rpx;
							}
						}

						.briefright {
							display: flex;
							align-items: center;
							width: 100%;

							text {
								max-width: calc(100% - 70rpx);
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							image {
								width: 70rpx;
								height: 28rpx;
								margin-left: 10rpx;
							}
						}
					}

					.more {
						color: #867F7F;
						font-size: 24rpx;
						font-family: Arial;
						display: flex;
						justify-content: space-between;
						border-top: 1rpx solid #ccc;
						padding-top: 20rpx;

						.moreleft {
							display: flex;
							align-items: center;

							image {
								margin-right: 10rpx;
								width: 24rpx;
								height: 30rpx;
							}
						}

						button {
							width: 146rpx;
							height: 54rpx;
							line-height: 58rpx;
							color: #867F7F;
							font-size: 24rpx;
							text-align: center;
							margin: 0;
							padding: 0;
						}

						.moreright {
							color: #000;
						}

					}
				}
			}

			.two {
				.newsList {
					padding: 30rpx;
					width: 100%;
					background-color: #fff;
					border-radius: 6rpx;
					margin-bottom: 20rpx;

					.newsTop {
						font-weight: bold;
						font-size: 32rpx;
						font-family: Arial;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.comname {
							display: flex;
							align-items: center;
							width: 50%;

							image {
								width: 70rpx;
								height: 28rpx;
								margin-left: 10rpx;
							}

							text:nth-child(1) {
								width: calc(100% - 70rpx);
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}

						text:nth-child(2) {
							font-size: 24rpx;
							color: #867F7F;
							font-weight: normal;
							white-space: nowrap;
						}


					}

					.brief {
						font-size: 26rpx;
						font-family: Arial;
						color: #867F7F;
						margin: 20rpx 0;
						display: flex;

						text {
							background-color: #f1f1f1;
							border-radius: 6rpx;
							padding: 15rpx;
						}

						text:nth-child(2) {
							margin: 0 20rpx;
						}
					}

					.more {
						color: #867F7F;
						font-size: 24rpx;
						font-family: Arial;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-top: 1rpx solid #ccc;
						padding-top: 20rpx;

						.moreleft {
							display: flex;
							align-items: center;

							text:nth-child(1) {
								margin-right: 10rpx;
							}
						}

						button {
							width: 146rpx;
							height: 54rpx;
							line-height: 58rpx;
							color: #867F7F;
							font-size: 24rpx;
							text-align: center;
							margin: 0;
							padding: 0;
						}

						.moreright {
							color: #F26817;
						}

					}
				}
			}

		}


	}

	:deep .u-dropdown {
		box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4) !important;
		background-color: #fff;
	}
</style>